{{left_sidebar_enabled = False
right_sidebar_enabled = False}}
{{extend 'layout.html'}}

<!-- load dojo and provide config via data attribute -->
<script src="{{=URL('static','dojo/dojo/dojo.js')}}" data-dojo-config="async: true"></script>

<style type="text/css">
	.legendstyle{
		overflow-y:scroll;
		height: 360px; 
		width: 200px; 
		padding-left: 100px
	}
	.chartstyle{
		width: 600px; 
		height: 360px; 
		float: left; 
		padding-left: 35px
	}
</style>


<script type="text/javascript">
	require(["dojo/ready", "dojo/on", "dojo/dom", "dojox/charting/Chart", 
	"dojox/charting/plot2d/Pie", "dojox/charting/action2d/Highlight", 
	"dojox/charting/action2d/MoveSlice", "dojox/charting/action2d/Tooltip", 
	"dojox/charting/action2d/Magnify","dojox/charting/action2d/MouseIndicator",
	"dojox/charting/themes/Tom",  "dojox/charting/themes/Electric", "dojox/charting/widget/Legend", 
	"dojo/request", "dojo/_base/xhr", "dojo/parser", 
	"dijit/form/DateTextBox", "dijit/Dialog", 
	"dijit/registry", "dojox/charting/axis2d/Default", "dojox/charting/plot2d/Areas", 
	"dojox/charting/plot2d/StackedAreas","dojox/charting/plot2d/Grid", 
	"dojox/charting/plot2d/ClusteredColumns", "dojo/domReady!"], 
	
	function(ready, on, dom, Chart, 
		Pie, Highlight, 
		MoveSlice, Tooltip, 
		Magnify, MouseIndicator,
		Tom, Electric, Legend, 
		request, xhr, parser, 
		DateTextBox, Dialog, registry) {

		newPieChart = function(idNodePie, idNodeLeg, title){
			var pieChart = null;
			var legend = null;
			pieChart = new Chart(idNodePie, {
			  title: title,
			  titlePos: "top",
			  titleGap: 25,
			  titleFont: "normal normal normal 15pt Arial",
			  titleFontColor: "orange"
			});
			pieChart.setTheme(Electric).addPlot("default", {
				type : "Pie",
				font : "normal normal 10pt Tahoma",
				fontColor : "#ccc",
				labelWiring : "#ccc",
				radius : 110,
				labelStyle : "columns",
				htmlLabels : true,
				startAngle : -10
			}).addSeries("Series A", []);
			var anim_a = new MoveSlice(pieChart, "default");
			var anim_b = new Highlight(pieChart, "default");
			var anim_c = new Tooltip(pieChart, "default");
			pieChart.render();
			legend = new Legend({
				chart : pieChart,
				fontColor : "#ccc",
				horizontal : false
			}, idNodeLeg);	
			
			return [pieChart, legend]		
			
		}
		
		
		newChart = function(idNodeChart, idNodeLeg, title){
			chart = new Chart(idNodeChart, {
			  title: title,
			  titlePos: "top",
			  titleGap: 25,
			  titleFont: "normal normal normal 15pt Arial",
			  titleFontColor: "orange"
			});
			chart.setTheme(Electric);
			chart.addAxis("x", {
				min : 1,
				max : 31,
				fixLower : "minor",
				natural : true,
				stroke : "grey",
				majorTick : {
					stroke : "black",
					length : 5
				},
				minorTick : {
					stroke : "gray",
					length : 1
				}
			});
			chart.addAxis("y", {
				vertical : true,
				min : 0,
				max : 100,
				majorTickStep : 5,
				minorTickStep : 1,
				stroke : "grey",
				majorTick : {
					stroke : "black",
					length : 4
				},
				minorTick : {
					stroke : "gray",
					length : 2
				}
			});
			
			chart.addPlot("default", {
				type: "Default",
				animate : {
					duration : 1800
				},
				markers : true
			});
			
			chart.addSeries("Series A", [], {
				plot : "default"
			});	
			
			var anim_c = new Magnify(chart, "default");
			chart.render();
			legend = new Legend({
				chart : chart,
				fontColor : "#ccc",
				horizontal : false
			}, idNodeLeg);	
			
			return [chart, legend];
			
		}
		
		
		newColumns = function(idNodeChart, idNodeLeg, title){
			columns = new Chart(idNodeChart, {
			  title: title,
			  titlePos: "top",
			  titleGap: 25,
			  titleFont: "normal normal normal 15pt Arial",
			  titleFontColor: "orange"
			});
			columns.setTheme(Electric);
            columns.addAxis("x", {fixLower: "major", fixUpper: "major", natural: true});
            columns.addAxis("y", {vertical: true, fixLower: "major", fixUpper: "major", includeZero: true,  minorTickStep: 0.5});
            columns.addPlot("default", {type: "ClusteredColumns", gap: 1});
            columns.addSeries("Afiliados", []);
            columns.addSeries("No Afiliados", []);
            columns.addSeries("Empleadores", []);
            columns.addSeries("Prestadores", []);
			var anim_c = new Tooltip(columns, "default");
            columns.render();
			legend = new Legend({
				chart : columns,
				fontColor : "#ccc",
				horizontal : false
			}, idNodeLeg);
            return [columns, legend];
		}


		function refreshColumns(url, columnsObj, legObj) {
			xhr.get({
				// URL de la request
				url : url,
				handleAs : "json",
				content : {
				},
				load : function(response) {
					var newData = response;
					columnsObj.updateSeries("Afiliados", newData[0]);
					columnsObj.updateSeries("No Afiliados", newData[1]);
					columnsObj.updateSeries("Empleadores", newData[2]);
					columnsObj.updateSeries("Prestadores", newData[3]);
					columnsObj.render();
					legObj.refresh();
				}
			});
		}

		function refreshPie(url, pieObj, legObj) {
			xhr.get({
				// URL de la request
				url : url,
				handleAs : "json",
				content : {
				},
				load : function(response) {
					var newData = response;
					pieObj.updateSeries("Series A", newData);
					pieObj.render();
					legObj.refresh();
				}
			});
		}
		
		function refreshChart(url, chartObj, legObj) {
			
	        chartObj.addAxis("x", {
	            htmlLabels: false, 
	            natural: true, 
	            min: 1, 
	            max: 31,
	        })
	        
			xhr.get({
				url : url,
				handleAs : "json",
				content : {
				},
				load : function(response) {
					var newData = response;
					chartObj.updateSeries("Series A", newData);
					chartObj.render();
					legObj.refresh();
				}
			});
	       
		}


		parser.parse();
		
		showChart = function(num, chartObj, legObj) {
			switch (num) {
				case 1:
					url = '{{=URL(r = request, c = "informes", f="pie_comunicaciones_por_usuario")}}';
					refreshPie(url, chartObj, legObj);
					break;
				case 2:
					url = '{{=URL(r = request, c = "informes", f="pie_comunicaciones_por_provincia")}}';
					refreshPie(url, chartObj, legObj);
					break;
				case 3:
					url = '{{=URL(r = request, c = "informes", f="pie_consultas_resultado")}}';
					refreshPie(url, chartObj, legObj);
					break;
				case 4:
					url = '{{=URL(r = request, c = "informes", f="chart_consultas_por_dia")}}';
					refreshChart(url, chartObj, legObj);
					break;
				case 5:
					url = '{{=URL(r = request, c = "informes", f="chart_comunicaciones_por_tipo_consultante")}}';
					refreshColumns(url, chartObj, legObj);
					break;
			}
		}
		
		
		created1 = newPieChart("chart1", "legend1", "Comunicaciones atendidas por usuario");
		created2 = newPieChart("chart2", "legend2", "Comunicaciones por provincia");
		created3 = newPieChart("chart3", "legend3", "Consultas por resoluci&oacute;n");		
		created4 = newChart("chart4", "legend4", "Comunicaciones atendidas por d&iacute;a para el mes actual");	
		created5 = newColumns("chart5", "legend5", "Cantidad de Comunicaciones por consultante");	
		
		
		showChart(1, created1[0], created1[1]);
		showChart(2, created2[0], created2[1]);
		showChart(3, created3[0], created3[1]);
		showChart(4, created4[0], created4[1]);
		showChart(5, created5[0], created5[1]);
		
	}); 
</script>

<br />
<br />

<div id="chart4" class = "chartstyle"></div>
<div id="legendCont4" class = "legendstyle">
	<div id="legend4"></div>
</div>

<br />
<br />

<div id="chart1" class = "chartstyle"></div>
<div id="legendCont1" class = "legendstyle">
	<div id="legend1"></div>
</div>

<br />
<br />

<div id="chart2" class = "chartstyle"></div>
<div id="legendCont2" class = "legendstyle">
	<div id="legend2"></div>
</div>

<br />
<br />

<div id="chart3" class = "chartstyle"></div>
<div id="legendCont3" class = "legendstyle">
	<div id="legend3"></div>
</div>

<br />
<br />


<div id="chart5" class = "chartstyle"></div>
<div id="legendCont5" class = "legendstyle">
	<div id="legend5"></div>
</div>

<br />
<br />


